<template>
  <div class="weather-card">
    <!-- 当前天气 -->
    <div class="current-section">
      <h2 class="city">{{ weatherData.city }}</h2>
      <div class="current-weather">
        <WeatherIcon :type="currentWeatherType" class="main-icon" />
        <div class="temp-group">
          <div class="current-temp">{{ currentTemp }}℃</div>
          <div class="weather-status">{{ currentWeather }}</div>
        </div>
      </div>
      <div class="update-time">
        更新时间：{{ formatTime(weatherData.reporttime) }}
      </div>
    </div>

    <!-- 天气预报 -->
    <div class="forecast-section">
      <div 
        v-for="(day, index) in processedForecastDays"
        :key="index"
        class="forecast-item"
      >
        <div class="date">{{ day.displayDate }}</div>
        <WeatherIcon :type="day.day.weather" />
        <div class="temps">
          <span class="high">{{ day.day.temp }}℃</span>
          <span class="low">{{ day.night.temp }}℃</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import dayjs from 'dayjs'
import WeatherIcon from './WeatherIcon.vue'

const props = defineProps({
  weatherData: {
    type: Object,
    required: true
  }
})

// 计算属性
const currentTemp = computed(() => props.weatherData.current.temp)
const currentWeather = computed(() => props.weatherData.current.weather)
const currentWeatherType = computed(() => 
  props.weatherData.current.weather.includes('晴') ? 'sunny' : 'cloudy'
)

const forecastDays = computed(() => 
  props.weatherData.forecast.slice(0, 5)
)

// 日期格式化
const formatTime = (time) => {
  if (!time) return '暂无数据';
  return dayjs(time).format('YYYY-MM-DD HH:mm');
}

const formatDate = (date) => {
  if (!date) return '暂无数据';
  
  const targetDate = dayjs(date);
  const weekMap = {
    '1': '星期一',
    '2': '星期二',
    '3': '星期三',
    '4': '星期四',
    '5': '星期五',
    '6': '星期六',
    '0': '星期日'
  };
  
  const weekDay = weekMap[targetDate.day().toString()];
  return `${targetDate.format('MM-DD')} ${weekDay}`;
}

// 添加计算属性来处理预报数据
const processedForecastDays = computed(() => {
  if (!props.weatherData.forecast) return [];
  
  return props.weatherData.forecast.map(day => {
    return {
      ...day,
      displayDate: formatDate(day.date)
    };
  });
})
</script>

<style scoped>
.weather-card {
  background-color: cornflowerblue;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.current-section {
  text-align: center;
  margin-bottom: 2rem;
}

.city {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.current-weather {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.main-icon {
  width: 100px;
  height: 100px;
}

.temp-group {
  text-align: left;
}

.current-temp {
  font-size: 3rem;
  font-weight: bold;
}

.weather-status {
  font-size: 1.2rem;
  color: #6b7280;
}

.forecast-section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.forecast-item {
  padding: 1rem;
  border-radius: 8px;
  background: #f8fafc;
  text-align: center;
}

.temps {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.high { color: #ef4444; }
.low { color: #3b82f6; }
</style>